<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="3" :offset="1">
          <el-select
            v-model="queryCondition.couponStatus"
            clearable
            placeholder="优惠券状态选择"
            @change="selStatus"
          >
            <el-option
              v-for="item in couponStatus"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :offset="1" :span="1">
          <el-date-picker
            v-model="selectedTime"
            type="datetimerange"
            start-placeholder="创建日期"
            end-placeholder="创建日期"
            :default-time="['12:00:00']"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleSelTime"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="3" :offset="7">
          <el-input
            placeholder="优惠券名称/编码"
            v-model="queryCondition.couponNameAndId"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" icon="el-icon-search" @click="selInfo"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-button @click="clearContent">清空</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <el-row>
        <el-col :span="3" :offset="21">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="jumpAddCoupon"
            >添加优惠券</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="优惠券编码"> </el-table-column>
            <el-table-column prop="name" label="优惠券名称"> </el-table-column>
            <el-table-column prop="condition" label="优惠券内容">
            </el-table-column>
            <el-table-column prop="total" label="所剩数量"> </el-table-column>
            <el-table-column prop="available" label="状态">
              <template slot-scope="scope">
                {{ showStatus(scope.row.available) }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-link type="primary" @click="stopCoupon(scope.row)"
                  >停用</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <!-- 分页 -->
    <el-row style="margin-top: 20px">
      <el-col :span="7" :offset="15">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 5, 8, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @next-click="nextPage"
            @prev-click="prevPage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  created() {
    this.selCouponByCondition();
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: null,
      selectedTime: [],
      queryCondition: {
        couponNameAndId: "",
        couponStatus: "",
        startTime: "",
        endTime: "",
      },
      couponStatus: [
        { id: 0, name: "不可用", value: 0 },
        { id: 1, name: "可用", value: 1 },
      ],
    };
  },
  methods: {
    stopCoupon(row) {
      console.log(row);
      if(row.available == 0){
        this.$message({
          showClose: true,
          message: '已经停用！',
          type: 'warning'
        });
        return;
      }
      this.$axios
        .get("api/product-server/stopCoupon", { params: { couponId: row.id } })
        .then((response) => {
          if (response.data.code == 200) {
            this.selCouponByCondition();
            this.$message({
              showClose: true,
              message: "停用成功",
              type: "success",
            });
          }
        });
    },
    jumpAddCoupon() {
      this.$router.push({ path: "/addCoupon" });
    },
    clearContent() {
      this.selectedTime = [];
      this.queryCondition = {
        couponNameAndId: "",
        couponStatus: "",
        startTime: "",
        endTime: "",
      };
    },
    selStatus() {
      this.selCouponByCondition();
    },
    showStatus(id) {
      if (id == 0) {
        return "不可用";
      } else if (id == 1) {
        return "可用";
      }
    },
    selInfo() {
      this.pageNum = 1;
      this.selCouponByCondition();
    },
    selCouponByCondition() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.queryCondition;
      this.$axios
        .post("api/product-server/selCouponByCondition", params)
        .then((response) => {
          if (response.data.code == 200) {
            this.tableData = response.data.data.list;
            this.pageNum = response.data.data.pageNum;
            this.total = response.data.data.total;
            this.pageSize = response.data.data.pageSize;
            //console.log(response.data.data);
          }
        });
    },
    prevPage(val) {
      this.pageNum = val;
      this.selCouponByCondition();
    },
    nextPage(val) {
      this.pageNum = val;
      this.selCouponByCondition();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.selCouponByCondition();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selCouponByCondition();
    },
    handleSelTime() {
      this.queryCondition.startTime = this.selectedTime[0];
      this.queryCondition.endTime = this.selectedTime[1];
    },
  },
};
</script>

<style scoped></style>
